<template>
    <div id="backtoup" @touchstart="backtoupBtn()">
        <p><img src="../../static/image/backtoup.png" ></p>
    </div>
</template>

<script>
export default {
    data(){
        return{
              scroll:'',
        }
    },
    methods:{
        backtoupScroll(){
            this.scroll = document.documentElement.scrollTop;
            if(this.scroll>300){
                $("#backtoup").css("display","block");
            }else{
                $("#backtoup").css("display","none");
            }
        },
        backtoupBtn(){
            document.documentElement.scrollTop=0;
        },
    },
    mounted(){
        window.addEventListener('scroll', this.backtoupScroll);
    }
}
</script>

<style scoped>
#backtoup{
    position: relative;
    display:none;
    text-align:center;
}
#backtoup p{
    background-color:rgba(0,0,0,0.6);
    position: fixed;
    bottom: 100px;
    right: 25px;
    width:60px;
    height:60px;
    border-radius: 50%;

 
}
img{
    position:relative;
    top:13px;
    opacity: 0.5;
}
</style>